@use '../tools/colors';

$search-torrents--base: #091824;
$search-torrents--background: rgba($search-torrents--base, 0.3);
$search-torrents--background--active: rgba(colors.$blue, 0.25);
$search-torrents--border: rgba($search-torrents--background, 0.4);
$search-torrents--border--active: rgba(colors.$blue, 0.3);
$search-torrents--foreground: colors.$sidebar--foreground;
$search-torrents--foreground--active: colors.$blue;
$search-torrents--placeholder: rgba(colors.$sidebar--foreground, 0.4);
$search-torrents--placeholder--active: rgba(colors.$blue, 0.4);

$search-torrents--icon--foreground: colors.$sidebar--foreground;
$search-torrents--icon--foreground--active: colors.$blue;

.search {
  position: relative;

  .icon {
    fill: $search-torrents--icon--foreground;
    height: 22px;
    left: 17px;
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transition: fill 0.25s, opacity 0.25s;
    transform: translateY(-50%);
    width: 22px;

    &--close {
      left: auto;
      right: 17px;
    }
  }

  .button {
    border-radius: 0;
    border: 0;
    height: 100%;
    position: absolute;
    right: 0;
    width: 30px;

    .icon {
      position: absolute;
      height: 10px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
    }
  }

  .textbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid $search-torrents--border;
    border-left: none;
    border-right: none;
    border-radius: 0;
    background: $search-torrents--background;
    box-shadow: none;
    color: $search-torrents--foreground;
    display: block;
    font-size: 1em;
    outline: none;
    padding: 12px 0 12px 45px;
    transition: background 0.25s, border 0.25s, color 0.25s;
    width: 100%;

    &::placeholder {
      color: $search-torrents--placeholder;
      font-style: italic;
      transition: color 0.25s;
    }
  }

  &.is-in-use {
    .icon {
      fill: $search-torrents--icon--foreground--active;
      opacity: 1;
    }

    .textbox {
      background: $search-torrents--background--active;
      border-bottom: 1px solid $search-torrents--border--active;
      border-top: 1px solid $search-torrents--border--active;
      color: $search-torrents--foreground--active;
      padding-right: 45px;

      &::placeholder {
        color: $search-torrents--placeholder--active;
      }
    }
  }
}
